window.addEventListener('load', function () {
    let total = document.querySelector('.total')
    let avgSalary = document.querySelector('.avgSalary')
    let avgAge = document.querySelector('.avgAge')
    let proportion = document.querySelector('.proportion')

    ///---------学员信息----------

    axios({
        url: '/student/list',
    }).then(res => {
        console.log(res);

        let pieArr = []

        let names = []
        let salarys = []
        let truesalarys = []


        chinaGeoCoordMap = {}
        chinaData = []
        res.data.data.forEach(function (value, index) {

            //*-----------------------饼图数据开始----------------------------    
            let pic = pieArr.filter(v => {
                // console.log(v);
                return v.name === value.province
            })[0]

            if (pic) {
                pic.value++
            } else {
                pieArr.push({ value: 1, name: value.province })
            }
            //*-----------------------饼图数据开始----------------------------    
            //*-----------------------折现图数据开始----------------------------    
            names.push(value.name)
            salarys.push(value.salary)
            truesalarys.push(value.truesalary)
            // console.log(names, salarys, truesalarys);

            //*-----------------------折现图数据结束----------------------------    
            //*-----------------------地图数据开始----------------------------  
            chinaGeoCoordMap[value.province] = [value.jing, value.wei]
            chinaDatas = pieArr.map(v => {
                return [v]
            })

            // console.log(chinaGeoCoordMap, chinaDatas);

            //*-----------------------地图数据结束----------------------------    


        })

        Bingpie(pieArr)
        panelline(names, salarys, truesalarys)
        mapChart(chinaGeoCoordMap,chinaDatas)
    })
    ///---------班级概览----------

    axios({
        url: '/student/overview'
    }).then(res => {
        console.log(res);
        total.innerHTML = res.data.data.total
        avgSalary.innerHTML = res.data.data.avgSalary
        avgAge.innerHTML = res.data.data.avgAge
        proportion.innerHTML = res.data.data.proportion
    })

    ///---------成绩----------
    function barps(data) {
        axios({
            url: `/score/batch?batch=${data}`
        }).then(res => {
            console.log(res);
            barChart(res.data.data)
        })
    }
    barps(1)

    ///----------饼图----------
    function Bingpie(data) {
        let myChart = echarts.init(document.querySelector('.pie'));

        // 指定图表的配置项和数据
        let option = {
            title: {
                text: '籍贯 HomeTown',
                left: 'left'
            },
            tooltip: {
                trigger: 'item',
                formatter: '{a} <br/>{b} : {c} ({d}%)'
            },
            series: [
                {
                    name: '各地人员分布',
                    type: 'pie',
                    radius: [15, 150],
                    center: ['50%', '50%'],
                    roseType: 'area',
                    itemStyle: {
                        borderRadius: 10
                    },
                    data
                }
            ]
        };
        // 使用刚指定的配置项和数据显示图表。
        myChart.setOption(option);

    }
    ///----------折线图----------

    function panelline(names, salarys, truesalarys) {
        let myChart = echarts.init(document.querySelector('.line'));

        // 指定图表的配置项和数据
        let option = {
            title: {
                text: 'Stacked Line'
            },
            tooltip: {
                trigger: 'axis'
            },
            legend: {
                data: ['期望薪资', '实际薪资',]
            },
            grid: {
                left: '3%',
                right: '4%',
                bottom: '25%',
                containLabel: true
            },
            dataZoom: [
                {
                    type: 'inside',
                    start: 0,
                    end: 10
                },
                {
                    start: 0,
                    end: 10
                }
            ],
            xAxis: {
                type: 'category',
                data: names
            },
            yAxis: {
                type: 'value'
            },
            series: [
                {
                    name: '期望薪资',
                    data: salarys,
                    type: 'line',
                    smooth: true,
                    lineStyle: { color: 'blue' }

                },
                {
                    name: '实际薪资',
                    data: truesalarys,
                    type: 'line',
                    smooth: true,
                    lineStyle: { color: 'red' }
                }
            ]
        };
        // 使用刚指定的配置项和数据显示图表。
        myChart.setOption(option);

    }
    ///----------柱状图----------

    function barChart(data) {
        let myChart = echarts.init(document.querySelector('.barChart'));

        // 指定图表的配置项和数据
        let option = {
            tooltip: {
                trigger: 'axis',
                axisPointer: {
                    type: 'cross',
                    crossStyle: {
                        color: '#999'
                    }
                }
            },
            grid: {
                left: '3%',
                right: '4%',
                bottom: '3%',
                top: '10%',
                containLabel: true
            },

            legend: {
                data: ['平均分', '低于60分', '60-80之间', '高于80分']
            },
            xAxis: [
                {
                    type: 'category',
                    data: data.group,
                    axisPointer: {
                        type: 'shadow'
                    }
                }
            ],
            yAxis: [
                {
                    type: 'value',

                    min: 0,
                    max: 100,
                    interval: 10,
                    axisLabel: {
                        formatter: '{value} 分'
                    }
                },
                {
                    type: 'value',

                    min: 0,
                    max: 10,
                    interval: 1,
                    axisLabel: {
                        formatter: '{value} 人'
                    }
                }
            ],
            series: [
                {
                    name: '平均分',
                    type: 'bar',
                    tooltip: {
                        valueFormatter: function (value) {
                            return value + '人';
                        }
                    },
                    data: data.avgScore
                },
                {
                    name: '低于60分',
                    type: 'bar',
                    yAxisIndex: 1,
                    tooltip: {
                        valueFormatter: function (value) {
                            return value + '人';
                        }
                    },
                    data: data.lt60
                },
                {
                    name: '60-80之间',
                    type: 'bar',
                    yAxisIndex: 1,
                    tooltip: {
                        valueFormatter: function (value) {
                            return value + '人';
                        }
                    },
                    data: data.gt60
                },
                {
                    name: '高于80分',
                    type: 'bar',
                    yAxisIndex: 1,
                    tooltip: {
                        valueFormatter: function (value) {
                            return value + '人';
                        }
                    },
                    data: data.gt80
                }
            ]
        };
        // 使用刚指定的配置项和数据显示图表。
        myChart.setOption(option);
    }
    ///----------按次查询成绩----------
    let btn = document.querySelector('.btn')
    let batch = document.querySelector('#batch')
    let lis = batch.querySelectorAll('li')
    // console.log(lis);
    //*------显示隐藏第几次-----
    btn.addEventListener('click', function () {
        if (batch.style.display == 'block') {
            batch.style.display = 'none'
        } else {
            batch.style.display = 'block'
        }
    })
    //*------选择第几次-----
    lis.forEach(function (ele, index) {
        console.log(ele, index);
        ele.addEventListener('click', function () {
            barps(index + 1)
        })

    })



})